package com.xsy.android.compose.we.component.ui.page.discovery

import androidx.annotation.DrawableRes
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.HorizontalDivider
import androidx.compose.material3.Icon
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.xsy.android.compose.we.component.R
import com.xsy.android.compose.we.component.ui.compose.WeTopBar
import com.xsy.android.compose.we.component.ui.page.chat.unread
import com.xsy.android.compose.we.component.ui.theme.WeComposeTheme

/**
 *@author: xiaosy
 *时间: 2024/6/26
 *@Description: java类作用描述
 *@Version: 1.0
 **/
@Composable
fun DiscoveryList(modifier: Modifier = Modifier) {
    Column(modifier = modifier.fillMaxSize()) {
        WeTopBar(title = "发现")
        Box(
            modifier = Modifier
                .background(WeComposeTheme.colors.background)
                .fillMaxSize()
        ) {
            Column(
                modifier = Modifier
                    .background(WeComposeTheme.colors.listItem)
                    .fillMaxWidth()
            ) {
                DiscoveryListItem(R.drawable.ic_moments, "朋友圈", badge = {
                    Box(
                        modifier = Modifier
                            .padding(8.dp)
                            .clip(RoundedCornerShape(50))
                            .size(18.dp)
                            .background(WeComposeTheme.colors.badge)
                    ) {
                        Text(
                            text = "3",
                            modifier = Modifier.align(Alignment.Center),
                            fontSize = 12.sp,
                            color = WeComposeTheme.colors.onBadge
                        )
                    }
                }, endBadge = {
                    Image(
                        painter = painterResource(id = R.drawable.avatar_gaolaoshi),
                        contentDescription = "avatar",
                        modifier = Modifier
                            .padding(8.dp, 0.dp)
                            .size(32.dp)
                            .unread(true, WeComposeTheme.colors.badge)
                            .clip(RoundedCornerShape(4.dp))
                    )
                })
                Spacer(
                    modifier = Modifier
                        .background(color = WeComposeTheme.colors.background)
                        .fillMaxWidth()
                        .height(8.dp)
                )
                DiscoveryListItem(R.drawable.ic_channels, "视频号", endBadge = {
                    Image(
                        painter = painterResource(id = R.drawable.avatar_gaolaoshi),
                        contentDescription = "avatar",
                        modifier = Modifier
                            .padding(8.dp, 0.dp)
                            .size(32.dp)
                            .unread(true, WeComposeTheme.colors.badge)
                            .clip(RoundedCornerShape(4.dp))
                    )
                    Text(
                        text = "赞过",
                        modifier = Modifier.padding(8.dp, 0.dp, 4.dp, 0.dp),
                        fontSize = 14.sp,
                        color = WeComposeTheme.colors.textSecondary
                    )
                })
                Spacer(
                    modifier = Modifier
                        .background(color = WeComposeTheme.colors.background)
                        .fillMaxWidth()
                        .height(8.dp)
                )
                DiscoveryListItem(R.drawable.ic_ilook, "看一看")
                HorizontalDivider(
                    modifier = Modifier.padding(start = 56.dp),
                    color = WeComposeTheme.colors.chatListDivider,
                    thickness = 0.8f.dp
                )
                DiscoveryListItem(R.drawable.ic_isearch, "搜一搜")
                Spacer(
                    modifier = Modifier
                        .background(color = WeComposeTheme.colors.background)
                        .fillMaxWidth()
                        .height(8.dp)
                )
                DiscoveryListItem(R.drawable.ic_nearby, "直播和附近")
            }
        }
    }
}

@Composable
fun DiscoveryListItem(
    @DrawableRes icon: Int,
    title: String,
    badge: @Composable (() -> Unit)? = null,
    endBadge: @Composable (() -> Unit)? = null
) {
    Row(
        modifier = Modifier.fillMaxWidth(),
        verticalAlignment = Alignment.CenterVertically
    ) {
        Image(
            painter = painterResource(id = icon),
            contentDescription = "title",
            modifier = Modifier
                .padding(12.dp, 8.dp, 8.dp, 8.dp)
                .size(36.dp)
                .padding(8.dp)
        )
        Text(
            text = title, fontSize = 18.sp,
            color = WeComposeTheme.colors.textPrimary
        )
        badge?.invoke()
        Spacer(modifier = Modifier.weight(1f))
        endBadge?.invoke()
        Icon(
            painter = painterResource(id = R.drawable.ic_arrow_more),
            contentDescription = "更多",
            modifier = Modifier
                .padding(end = 12.dp)
                .size(16.dp),
            tint = WeComposeTheme.colors.more
        )
    }
}


@Preview(showBackground = true)
@Composable
fun PreviewDiscoveryListItem() {
    DiscoveryListItem(R.drawable.ic_moments, "朋友圈", badge = {
        Box(
            modifier = Modifier
                .padding(8.dp)
                .clip(RoundedCornerShape(50))
                .size(18.dp)
                .background(WeComposeTheme.colors.badge)
        ) {
            Text(
                text = "3",
                modifier = Modifier.align(Alignment.Center),
                fontSize = 12.sp,
                color = WeComposeTheme.colors.onBadge
            )
        }
    }, endBadge = {
        Image(
            painter = painterResource(id = R.drawable.avatar_gaolaoshi),
            contentDescription = "avatar",
            modifier = Modifier
                .padding(8.dp, 0.dp)
                .size(32.dp)
                .unread(true, WeComposeTheme.colors.badge)
                .clip(RoundedCornerShape(4.dp))
        )
    })
}

@Preview(showBackground = true)
@Composable
fun PreviewDiscoveryList() {
    DiscoveryList()
}